CSS Unit :

Plant CSS Clamp Calculator

Enter your desired minimum and maximum value at their respective viewport widths to calculate the CSS clamp() value.

Select CSS Property

Minimum Value - font-size(px):

Maximum - font-size(px):

Minimum Window Width (px):

Maximum Window Width (px):

Calculated CSS clamp() value:

Click "Calculate" to see the result.

For example the value is used for font size.

Current Viewport Width: 0px

Current Font Size (of Preview Text): 0px

This is a preview text. Resize your browser window to see the font size change dynamically based on the clamp() function!

This calculator generates a clamp() value for fluid font sizing, ensuring it stays within your defined min/max limits while scaling responsively across different screen sizes.

0px

576px

1199px

1920px

24px

0
Here the value is based on window width. If you want to check, resize the window width below 1199px and above 576px

40px

The one line code ( For all media devices ):

font-size: ;

The one line code explanation :

font-size: 40px;// Your Maximum value 

@media onlyscreen and (min-width: 576px) and (max-width: 1199px) {
// Based on window width using formula
//  
// If you want to check resize the window width below 1199px you will see changes 
font-size: 0;
}

@media only screen and (max-width: 575px) {
font-size: 24px;// Your Minimmum value 
}

Before clamp() - Old method responsive:

// Above window width 1200px to large devices
font-size: 40px;

@media only screen and (max-width: 1199px) {
font-size: 1199px;
}

@media only screen and (max-width: 991px) {
font-size: 991px;
}

@media only screen and (max-width: 767px) {
font-size: 767px;
}

@media only screen and (max-width: 575px) {
font-size: 575px;
}

@media only screen and (max-width: 412px) {
font-size: 412px;
}

@media only screen and (max-width: 360px) {
font-size: 24px;
}